<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">会员编辑</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <el-col class="mr20 width100">
                    <el-button
                        class="btn-success width100"
                        type="primary"
                        @click="submitForm(1)"
                    >保存</el-button>
                </el-col>
                <el-col class="mr20 width100">
                    <el-button
                        class="btn-success width100"
                        type="primary"
                        @click="submitForm(2)"
                    >提交</el-button>
                </el-col>
                <el-col :span="10" class="status-container">
                    <div class="status-item">
                        <span class="active">待审核</span>
                        <span>已审核</span>
                        <span>拒绝</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="status-title">
                <div class="mt20 ml10">基本信息</div>
            </el-row>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="mt30">
                <el-row>
                    <el-col :span="16">
                        <el-col :span="12">
                            <el-form-item label="手机号:" prop="phone">
                                <el-input v-model="form.phone" placeholder="" @blur="phoneVerify" maxlength="11" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="姓名:" prop="name">
                                <el-input v-model="form.name" placeholder="" @blur="onAddMember" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="性别:" prop="sex">
                                <el-select v-model="form.sex" style="width:100%;" placeholder="请选择">
                                    <el-option label="男" value="男"></el-option>
                                    <el-option label="女" value="女"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="身份证号:" prop="identityNumber">
                                <el-input v-model="form.identityNumber" placeholder="" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="出生日期:" prop="dateOfBirth">
                                <el-date-picker value-format="yyyy-MM-dd" v-model="form.dateOfBirth" suffix-icon="el-icon-date" type="date" placeholder="" style="width:100%;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="昵称:" prop="nickName">
                                <el-input v-model="form.nickName" placeholder="" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="邮箱:" prop="email">
                                <el-input v-model="form.email" placeholder="" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="民族:" prop="ethnic">
                                <el-select v-model="form.ethnic" placeholder="">
                                    <el-option label="汉" value="汉">汉</el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="学历:" prop="education">
                                <el-select v-model="form.education" style="width:100%;" placeholder="">
                                    <el-option
                                        v-for="item in educationList"
                                        :key="item.value"
                                        :label="item.value"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="微信:" prop="wechat">
                                <el-input v-model="form.wechat" placeholder="" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="销售区域:" prop="salesAreaId">
                                 <treeselect v-model="form.salesAreaId" :options="areaNameList" :normalizer="areaNormal" placeholder="选择销售区域" noOptionsText="暂无数据" @select="changeSelectSalesArea" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="客户分类:" prop="customerClassificationId">
                                <treeselect v-model="form.customerClassificationId" :options="sortNameList" :normalizer="userListNormal" placeholder="选择客户分类" noOptionsText="暂无数据" @select="changeSelectUserlist" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="默认收货地址:" prop="memberAddressList">
                                <template v-if="memberAddressList">
                                    {{ memberAddressList.province !== null ? memberAddressList.province : '' }}{{ memberAddressList.city !== null ? memberAddressList.city : '' }}{{ memberAddressList.area !== null ? memberAddressList.area : '' }}{{ memberAddressList.address !== null ? memberAddressList.address : '' }}
                                </template>
                                <el-button
                                    class="btn-success width100"
                                    type="primary"
                                    size="mini"
                                    @click="onAddress"
                                >地址列表</el-button>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="12">
                            <el-form-item label="最后登录时间:" prop="lastLoginTime">
                                <el-input v-model="form.lastLoginTime" placeholder="" disabled />
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="12">
                            <el-form-item label="备注:" prop="remarks">
                                <el-input v-model="form.remarks" placeholder="" />
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <!-- 上传图片 -->
                            <div class="img-item">
                                <el-upload
                                    class="avatar-uploader"
                                    action="#"
                                    :auto-upload="false"
                                    :on-change="onUploadType"
                                    accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PNG,.GIF,.BMP"
                                    :show-file-list="false"
                                >
                                    <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <!-- <div v-if="form.imageUrl" class="delete" @click="onDeleteImg">
                                    <i class="el-icon-delete"></i>
                                </div> -->
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import { memberAdd, memberEdit, memberDetail } from "@/api/system/member/member"
import { uploadImg } from "@/api/system/upload/upload"
import { listSalesArea, checkSalesArea } from "@/api/system/basedata/salesarea/salesarea"
import { listToAddUserList, checkUserList } from "@/api/system/basedata/userlist/userlist"
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
    name: "add",
    components: { Treeselect },
    data() {
        return {
            form: {
                memberInformationId: '', // 会员id
                phone: '', // 手机号
                nickName: '', // 昵称
                sex: '', // 性别
                identityNumber: '', // 身份证号
                dateOfBirth: '', // 出生日期
                name: '', // 姓名
                email: '', // 邮箱
                ethnic: '汉', // 民族
                education: '', // 学历
                wechat: '', // 微信
                areaName: '', // 销售区域名称
                salesAreaId: undefined, // 销售区域id
                sortName: '', // 客户分类名称
                customerClassificationId: undefined, // 客户分类id
                memberAddressList: [],
                lastLoginTime: '', // 最后登录时间
                remarks: '', // 备注
                imageUrl: '', // 上传图片
            },
            memberAddressList: {}, // 默认地址
            // 学历列表
            educationList: [
                {
                    value: '研究生'
                },
                {
                    value: '博士'
                },
                {
                    value: '博士后'
                },
                {
                    value: '本科'
                },
                {
                    value: '专科'
                },
                {
                    value: '中专'
                }
            ],
            areaNameList: [], // 销售区域列表
            sortNameList: [], // 客户分类列表
            // 表单校验
            rules: {
                phone: [
                    { required: true, message: "手机号不能为空", trigger: "blur"}
                ],
                name: [
                    { required: true, message: "姓名不能为空", trigger: "blur" }
                ]
            }
        }
    },
    created() {
        this.getSalesArea()
        this.getUserList()
        this.getMemberDetail()
    },
    methods: {
        // 获取销售区域
        getSalesArea(){
            listSalesArea().then(res => {
                this.areaNameList = this.handleTree(res.rows, "areaId")
            })
        },
        // 检测销售区域是否含有子集
        changeSelectSalesArea(e){
            // console.log(e)
            checkSalesArea(e.areaId).then(res => {
                // console.log(res)
                if(res.code == 103){
                    this.form.salesAreaId = undefined
                    this.$modal.msgError(res.msg)
                }else{
                    this.form.areaName = e.areaName
                }
            })
        },
        // 转换销售区域数据结构 
        areaNormal(e) {
            if (e.children && !e.children.length) {
                delete e.children
            }
            return {
                id: e.areaId,
                label: e.areaName,
                children: e.children
            }
        },
        // 获取客户分类
        getUserList() {
            listToAddUserList().then(res => {
                this.sortNameList = this.handleTree(res.data, "sortId")
            })
        },
        // 检测客户分类是否含有子集
        changeSelectUserlist(e){
            checkUserList(e.sortId).then(res => {
                // console.log(res)
                if(res.code == 103){
                    this.form.customerClassificationId = undefined
                    this.$modal.msgError(res.msg)
                }else{
                    this.form.sortName = e.sortName
                }
            })
        },
        // 转换客户分类数据结构
        userListNormal(e){
            if (e.children && !e.children.length) {
                delete e.children
            }
            return {
                id: e.sortId,
                label: e.sortName,
                children: e.children
            }
        },
        // 获取会员详情
        getMemberDetail(){
            memberDetail(this.$route.query.id).then(res => {
                if(res.code == 200){
                    this.form = res.data
                    if(res.data.memberAddressList.length > 0){
                        this.memberAddressList = res.data.memberAddressList[0]
                    }
                }
            })
        },
        // 手机号验证
        phoneVerify(val){
            if(/^[1][3,4,5,7,8][0-9]{9}$/.test(val.target.value) == false){
                this.$modal.msgError('请输入正确的手机号！')
                this.form.phone = ''
                return false
            }
        },
        // 姓名保存
        onAddMember(){
            if(this.form.phone == ''){
                this.$modal.msgError('手机号不能为空！')
                this.form.name = ''
            }else{
                if(this.form.memberInformationId){
                    // 编辑
                    memberEdit(this.form).then(res => {
                        if(res.code == 200){
                            this.getMemberDetail()
                        }
                    })
                }else{
                    // 保存
                    let data = this.form
                    data.status = '0'
                    memberAdd(this.form).then(res => {
                        if(res.code == 200){
                            this.form = res.data
                        }
                    })
                }
            }
        },
        // 照片上传
        onUploadType(item){
            this.$modal.loading("正在上传")
            let formData = new FormData()
            let file = item.raw
            formData.append('file', file)
            uploadImg(formData).then(res => {
                this.$modal.closeLoading()
                this.$modal.msgSuccess("上传成功")
                this.form.imageUrl = res.data.fileUrl
            })
        },
        // 删除照片
        onDeleteImg(){
            this.form.imageUrl = ''
        },
        // 跳转地址列表
        onAddress(){
            if(this.form.phone == ''){
                this.$modal.msgError('手机号不能为空！')
            }else if(this.form.name == ''){
                this.$modal.msgError('姓名不能为空！')
            }else{
                this.$router.push({path:"/customer/member/address", query:{ type: 'memberEdit', data: this.form }})
            }
        },
        // 确定
        submitForm(e){
            this.$refs["form"].validate(valid => {
                if(valid){
                    if(e == 2){
                        // 提交
                        let data = this.form
                        data.status = '1'
                        this.$modal.loading("正在提交")
                        memberEdit(data).then(res => {
                            if(res.code == 200){
                                this.$modal.msgSuccess("编辑成功")
                                this.$tab.closeOpenPage({ path: "/customer/member/list" })
                                this.$modal.closeLoading()
                            }
                        })
                    }else{
                        // 保存
                        let data = this.form
                        data.status = '0'
                        this.$modal.loading("正在保存")
                        memberEdit(data).then(res => {
                            if(res.code == 200){
                                this.$modal.msgSuccess("保存成功")
                                this.getMemberDetail()
                                this.$modal.closeLoading()
                            }
                        })
                    }
                }
            })
        }
    }
}
</script>

<style scoped>
.avatar-uploader{
  display: flex;
  align-items: center;
  justify-content: center;
  color:#606266;
  width: 150px;
  height: 150px;
  margin-bottom: 22px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #5ED4D4;
}
.avatar-uploader:hover .avatar-uploader-icon{
  color: #5ED4D4;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  display: block;
}
.img-item{
    position:relative;
}
.img-item:hover .delete{
    display: flex;
}
.delete{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 9999;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: 20px;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
</style>